<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>任务详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="/static/mui/js/mui.js"></script>
    <link href="/static/mui/css/mui.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604161_tfc7h0lgck5wxw29.css">
    <link rel="stylesheet" type="text/css" href="/static/css/aui.css"/>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vue-resource.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <style type="text/css">
        .block-c {
            background: white;
        }

        p span {
            color: #f7f7f7;
        }

        .project_team {
            padding-top: 8px;
            padding-bottom: 8px;
            margin-top: 8px;
            padding-left: 8px;
            font-size: 15px;
            border-bottom: 1px solid #f4f4f4;
            /*border-bottom: 1px solid #eee;*/
        }

        a .title {
            font-size: 15px;
            color: black;
        }

        a div {
            color: #929292;
            font-size: 15px;
        }

        .project_progress {
            padding-top: 8px;
            padding-bottom: 8px;
            margin-top: 8px;
            padding-left: 8px;
            font-size: 15px;
            border-bottom: 1px solid #f4f4f4;
            /*border-bottom: 1px solid #eee;*/
        }

        .bobao {
            padding-top: 8px;
            padding-bottom: 8px;
            margin-top: 8px;
            padding-left: 8px;
            font-size: 15px;
            border-bottom: 1px solid #f4f4f4;
            /*border-bottom: 1px solid #eee;*/
        }

        div h6 {
            font-size: 13px;
        }

        div h6 span {
            margin-left: 20%;
            color: black;
        }

        .diaryTextImg img {
            width: 90%
        }

        body {
            background-color: rgb(239, 239, 244);
        }

        .progress div {
            text-align: center;
            /*margin-bottom: 10px;*/
            margin-top: 10px;
            font-size: 15px;
            color: #000000;
        }

        .li_c {
            color: #a4a4a9;
        }

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 44px;
            /*margin-bottom: 45px;*/
            padding: 0px;
            overflow: hidden;
        }

        .bar-nav {
            top: 0;
            text-align: center;
        }

        .bar {
            position: fixed;
            z-index: 10;
            right: 0;
            left: 0;
            height: 44px;
            padding-right: 10px;
            padding-left: 10px;
            border-bottom: 0;
            backface-visibility: hidden;
        }

    </style>
</head>

<body>
<!--头部开始-->
<div class="bar bar-nav block-c">
<span style="color:#555555;line-height: 44px;float: left" onclick="back()">
        <span class="live live-fanhui"></span>
    </span>
    <!--<span class="mui-icon icon icon-fenxiang-copy mui-pull-right" style="line-height: 44px;font-size: 20px ; color: #fe8200;"></span>-->
    <span style="line-height: 44px">任务详情</span>
</div>
<!--头部结束-->

<!--信息展示开始-->

<div class="content weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">
    <div id="app">
        <!--顶部图片开始-->
        <div class="workerInfo">
            <div class="ft" style="position: relative;height: 135px">
                <img src="/static/images/t3.jpg" style="height: 100%;width: 100%;">
                <span style="position: absolute;left: 10px;bottom: 5px;">
                <h5 style="color:#f7f7f7;">
                    {foreach name="$pro.client" item="it"}
                    <b>{$it.name}</b>
                    {/foreach}
                    的家</h5>
            <p>
                <span>{$pro.address}</span>
						<span>{$pro.house_type}</span>
						<span>{$pro.area}m²</span>
						</p>
						</span>
            </div>
        </div>
        <!--顶部图片结束-->

        <!--项目管理团队开始-->
        <div class="project_team block-c">
            项目管理团队
        </div>
        <div class="team_members mui-row block-c">
            <div class=" mui-col-sm-3 mui-col-xs-3" style="text-align: center;margin-top: 10px;margin-bottom: 10px">
                <a>
                    <img src="{$am.avatar}" style="max-width: 50px;">
                    <div class="title">客户经理</div>
                    <div>{$am.truename}</div>
                </a>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3" style="text-align: center;margin-top: 10px;">
                <a>

                    <img src="{$ds.avatar}" style="max-width: 50px;">
                    <div class="title">设计师</div>
                    <div>{$ds.truename}</div>
                </a>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3" style="text-align: center;margin-top: 10px;">
                <a>

                    <img src="{$pm.avatar}" style="max-width: 50px;">
                    <div class="title">项目经理</div>
                    <div>{$pm.truename}</div>
                </a>
            </div>
            <div class="mui-col-sm-3 mui-col-xs-3" style="text-align: center;margin-top: 10px;">
                <a>

                    <img src="{$qc.avatar}" style="max-width: 50px;">
                    <div class="title">质检</div>
                    <div>{$qc.truename}</div>
                </a>
            </div>
        </div>
        <!--项目管理团队结束-->


        <div class="project_progress block-c">

            <div style="padding: 10px 10px;">
                <div id="segmentedControl" class="mui-segmented-control" style=" border: 1px solid #fe8200;">
                    <!--<a class="mui-control-item mui-active" href="#item1">待办公文（8）</a>-->
                    <a class="mui-control-item" href="#item2">已办公文</a>
                    <a class="mui-control-item" href="#item3">全部公文</a>
                </div>
            </div>
            <div>
                <div id="item2" class="mui-control-content" >
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第二个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第二个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第二个选项卡子项-3
                        </li>
                    </ul>
                </div>
                <div id="item3" class="mui-control-content">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第三个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第三个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第三个选项卡子项-3
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!--施工进度开始-->
        <div class="project_progress block-c">
            <span>施工进度</span>

            <a class="mui-pull-right" href="#" style="background-color: #fe8200;
                    	 color: #ffffff;height: 25px;text-align: center; line-height: 25px;padding-left: 5px;">
                进度详情
                <span class=" mui-icon icon icon-moreinfo-copy"></span>
            </a>

        </div>
        <div class="progress mui-row block-c">
                    {switch name="$sd"}
                    {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/shuidianl.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>水电工程</div>
                </a>
            </div>
                    {/case}
                    {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/shuidianl.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>水电工程</div>
                </a>
            </div>
                    {/case}
                    {default /}
                    {/switch}


            {switch name="$cc"}
            {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/caichul.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>拆除工程</div>
                </a>
            </div>
            {/case}
            {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/caichuh.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>拆除工程</div>
                </a>
            </div>
            {/case}
            {default /}
            {/switch}

            {switch name="$wg"}
            {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/chuweil.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>瓦工工程</div>
                </a>
            </div>
            {/case}
            {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/chuweih.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>瓦工工程</div>
                </a>
            </div>
            {/case}
            {default /}
            {/switch}

            {switch name="$yg"}
            {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/shigongl.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>油工工程</div>
                </a>
            </div>
            {/case}
            {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/shigongh.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>油工工程</div>
                </a>
            </div>
            {/case}
            {default /}
            {/switch}

            {switch name="$mz"}
            {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/muzuol.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>木作安装</div>
                </a>
            </div>
            {/case}
            {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/muzuoh.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>木作安装</div>
                </a>
            </div>
            {/case}
            {default /}
            {/switch}


            {switch name="$bj"}
            {case value="2"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/yanshoul.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>竣工保洁</div>
                </a>
            </div>
            {/case}
            {case value="1"}
            <div class=" mui-col-sm-4 mui-col-xs-4">
                <a>
                    <img src="/static/images/yanshouh.png" style="width: 3.0rem; height: 3.0rem;"/>
                    <div>竣工保洁</div>
                </a>
            </div>
            {/case}
            {default /}
            {/switch}


        </div>
        <!--施工进度结束-->






        <!--每日施工播报开始-->

        <div class="bobao block-c">每日施工播报</div>
          <div id="list">
            <div class="aui-timeline block-c" v-for="item in infoList">
                <div class="aui-timeline-item-header">
                    <div class="aui-row aui-row-padded">
                        <div class="aui-col-xs-6">
                            {{item.log_time|setDate}}
                        </div>
                        <div class="aui-col-xs-6" style="color: #fe8200;">
                            正常施工
                        </div>
                    </div>

                </div>
                <div class="aui-timeline-item">
                    <div class="aui-timeline-item-label-icon"
                         style="background-color:#fe8200;width: 1.0rem;  height: 1.0rem; left: 1.4rem;">
                    </div>
                    <div class="aui-timeline-item-inner">
                        <div class="aui-card-list">
                            <div class="aui-card-list-content-padded">
                                <div class="aui-row aui-row-padded">
                                    <div class="aui-col-xs-12">
                                        施工内容
                                    </div>
                                    <div class="aui-col-xs-12 li_c">
                                        {{item.log_content}}
                                    </div>
                                    <div class="aui-col-xs-12">
                                        施工人员
                                    </div>
                                    <div class="aui-col-xs-12 li_c">
                                        {{item.worker}}
                                    </div>

                                </div>

                                <div class="aui-row aui-row-padded">
                                    <div class="aui-col-xs-12">
                                        施工图片
                                    </div>
                                    <div class="aui-col-xs-4" v-for="(it,i) in item.pictures">
                                        <img :src="it.log_picture"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div id="listend">

        </div>

        <!--每日施工播报结束-->
    </div>
    <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>

<!--信息展示结束-->

</body>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            infoList:[],
        },
        filters:{
            //过滤器
            setDate:function (value) {
                var arr=[];
                arr=value.split("-");
                return arr[1]+'月'+arr[2]+'日'+arr[0]+'年';
            }
        },
        methods: {

        }
    });
    var pages = 1;
    var loading = false; //状态标记
    $(function() {
        loadlist();
    });
    //============================滚动加载
    $("#listwrap").infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        pages++; //页数
        $('.weui-loadmore').show();
        setTimeout(function() {
            loadlist();
            loading = false;
        }, 1500); //模拟延迟
    });


    function loadlist() {
        var str = "";
        $.ajax({
            type:"post",
            url:"",
            dataType:'JSON',
            data:{page:pages},
            error: function (){
                $(".weui-loadmore").hide();
                str += " <div class=\"weui-cells__title\" style=\"text-align: center\">\n" +
                    "                   <div class=\"live live-kulian\" style=\"font-size: 50px\"></div>\n" +
                    "                    <div style=\"font-size: 15px\">服务器出错了！</div>\n" +
                    "                </div>\n";
                $("#list").html(str);
            },
            success: function (data) {
                console.log(data);
                if (data.length > 0){
                    if(pages==1){
                        vm.infoList=data;
                    }
                    else{
                        vm.infoList=vm.infoList.concat(data);
                    }
                    $("#listend").html("");
                }
                else {
                    if(pages==1){
                        vm.infoList=[];
                    }
                    str += "<div class=\"weui-cells__title\" style=\"text-align: center\">\n" +
                        "                    无更多数据\n" +
                        "                </div>";
                    $("#listend").html(str);
                    loading = true;
                }
                $(".weui-loadmore").hide();
            }
        });

    }

</script>
<script>
    function back(){
        var path="{:url('/home/project/task')}";
        location.href = path;
    }
</script>

</html>